<!DOCTYPE html>
<html lang="kr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="../../assets/ico/favicon.png">
		<title>병해충 통합관리 서비스</title>

		<!-- Bootstrap core CSS -->
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link rel="stylesheet" type="text/css" href="/css/ui.jqgrid.css"/>
		<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css"/>
		<link rel="stylesheet" type="text/css" href="/css/main.css">
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<style>
			.portlet-placeholder {
				border: 1px dotted black;
				margin: 0 1em 1em 0;
				height: 50px;
			}
		</style>
		<script src="/js/jquery-1.11.1.min.js"></script>
		<script src="/js/jquery-ui.js"></script>
		<script src="/js/jquery.jqGrid.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/js/i18n/grid.locale-kr.js"></script>
		<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=238163d2e97b2a40fa70f7e332dafaa5"></script>
		<script src="/js/highcharts.js"></script>
		<script src="http://code.highcharts.com/modules/data.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">병해충 통합관리 서비스</a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">Home</a>
						</li>
						<li>
							<a href="#about">발생조사관리</a>
						</li>
						<li>
							<a href="#contact">방제계획 및 실적</a>
						</li>
						<li>
							<a href="#contact">보고관리</a>
						</li>
						<li>
							<a href="#contact">발생경보</a>
						</li>
						<li>
							<a href="#contact">병해충 현황 </a>
						</li>
					</ul>
				</div>
				<!-- /.nav-collapse -->
			</div>
			<!-- /.container -->
		</div>
		<!-- /.navbar -->

		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#">전체</a>
						</li>
						<li>
							<a href="#">소나무재선충</a>
						</li>
						<li>
							<a href="#">참나무시들음병</a>
						</li>
						<li>
							<a href="#">솔잎혹파리</a>
						</li>
						<li>
							<a href="#">솔껍질깍지벌레</a>
						</li>
						<li>
							<a href="#">기타병해충</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<section class="accordion">
						<h3>발생현황 지도</h3>
						<div>
							<div class="main_prsts3">
								<div class="pull-left btn-group">
									<div class="btn-group btn-group-sm">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
											전체 <span class="caret"></span>
										</button>
										<ul class="dropdown-menu">
											<li>
												<a href="#">전체</a>
											</li>
											<li>
												<a href="#">서울</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="pull     -right btn-group btn-group-sm">
									<button class="btn btn-default">
										시도
									</button>
									<button class="btn btn-default">
										시군구
									</button>
									<button class="btn btn-default">
										읍면동
									</button>
								</div>
								<ul class="chart_legend">
									<li>
										서  울  13,946
									</li>
									<li>
										부  산  1,332
									</li>
									<li>
										대  구  310
									</li>
									<li>
										인  천  2,671
									</li>
									<li>
										광  주  217
									</li>
									<li>
										대  전  590
									</li>
									<li>
										울  산  1,050
									</li>
									<li>
										경  기  6,794
									</li>
									<li>
										강  원  23,514
									</li>
									<li>
										충  북  7,012
									</li>
									<li>
										충  남  8,984
									</li>
									<li>
										전  북  3,719
									</li>
									<li>
										전  남  12,373
									</li>
									<li>
										경  북  6,121
									</li>
									<li>
										경  남  17,581
									</li>
									<li>
										제  주  1,378
									</li>
								</ul>
							</div>
						</div>
					</section>
					<section class="accordion">
						<h3>방제실적 지도</h3>
						<div>
							<div class="main_prsts4">
								<div class="pull-left btn-group">
									<div class="btn-group btn-group-sm">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
											전체 <span class="caret"></span>
										</button>
										<ul class="dropdown-menu">
											<li>
												<a href="#">전체</a>
											</li>
											<li>
												<a href="#">서울</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="pull-right btn-group btn-group-sm"  >
									<button class="btn btn-default">
										시도
									</button>
									<button class="btn btn-default">
										시군구
									</button>
									<button class="btn btn-default">
										읍면동
									</button>
								</div>
								<div>
									<ul class="chart_legend">
										<li>
											서  울  13,946
										</li>
										<li>
											부  산  1,332
										</li>
										<li>
											대  구  310
										</li>
										<li>
											인  천  2,671
										</li>
										<li>
											광  주  217
										</li>
										<li>
											대  전  590
										</li>
										<li>
											울  산  1,050
										</li>
										<li>
											경  기  6,794
										</li>
										<li>
											강  원  23,514
										</li>
										<li>
											충  북  7,012
										</li>
										<li>
											충  남  8,984
										</li>
										<li>
											전  북  3,719
										</li>
										<li>
											전  남  12,373
										</li>
										<li>
											경  북  6,121
										</li>
										<li>
											경  남  17,581
										</li>
										<li>
											제  주  1,378
										</li>
									</ul>
								</div>
							</div>
						</div>
					</section>
				</div>
				<div class="col-md-6 column">
					<section class="accordion">
						<h3>발생현황 차트</h3>
						<div>
							<div id="container"></div>
							<script type="text/javascript">
								$(function() {
									$('#container').highcharts({
										chart : {
											type : 'area',
											height : 322
										},
										title : {
											text : ''
										},
										xAxis : {
											categories : ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]
										},
										credits : {
											enabled : false
										},
										series : [{
											name : "계",
											fillColor : "rgba(220,220,220,0.2)",
											strokeColor : "rgba(220,220,220,1)",
											pointColor : "rgba(220,220,220,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(220,220,220,1)",
											data : [243035, 315607, 389955, 371539, 353125, 290404, 225345, 167084, 137397, 122267]
										}, {
											name : "소나무재선충",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [4961, 7811, 7871, 6855, 6015, 5633, 3547, 5123, 5286, 11550]
										}, {
											name : "솔잎혹파리",
											fillColor : "rgba(250,130,88,0.2)",
											strokeColor : "rgba(250,130,88,1)",
											pointColor : "rgba(250,130,88,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [73206, 148846, 195759, 179585, 183229, 155897, 113123, 82125, 68031, 59309]
										}, {
											name : "솔껍질깍지벌레",
											fillColor : "rgba(129,190,247,0.2)",
											strokeColor : "rgba(129,190,247,1)",
											pointColor : "rgba(129,190,247,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [10971, 11988, 45146, 47207, 41210, 32497, 21855, 12524, 8945, 7050]
										}, {
											name : "참나무시들음병",
											fillColor : "rgba(243,247,129,0.2)",
											strokeColor : "rgba(243,247,129,1)",
											pointColor : "rgba(243,247,129,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [0, 0, 1944, 3591, 4087, 2489, 1812, 3307, 2680, 3090]
										}, {
											name : "기타병해충",
											fillColor : "rgba(255,0,128,0.2)",
											strokeColor : "rgba(255,0,128,1)",
											pointColor : "rgba(255,0,128,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [153897, 146962, 139235, 134301, 118584, 96377, 85008, 64005, 52455, 41268]
										}]
									});
								});

							</script>
						</div>

					</section>
					<section class="accordion">
						<h3>방제실적 차트</h3>
						<div>
							<div id="highchart_2" style="height:322px"></div>
							<script type="text/javascript">
								$(function() {
									$('#highchart_2').highcharts({
										chart : {
											type : 'column',
											height : 322
										},
										title : {
											text : ''
										},
										xAxis : {
											categories : ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"]
										},
										yAxis : {
											min : 0,
											title : {
												text : 'ha'
											},
											stackLabels : {
												enabled : true,
												style : {
													fontWeight : 'bold',
													color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
												}
											}
										},
										plotOptions : {
											column : {
												stacking : 'normal',
												dataLabels : {
													enabled : false,
													color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
													style : {
														textShadow : '0 0 3px black, 0 0 3px black'
													}
												}
											}
										},

										series : [{
											name : "소나무재선충",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [4961, 7811, 7871, 6855, 6015, 5633, 3547, 5123, 5286, 11550]
										}, {
											name : "솔잎혹파리",
											fillColor : "rgba(250,130,88,0.2)",
											strokeColor : "rgba(250,130,88,1)",
											pointColor : "rgba(250,130,88,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [73206, 148846, 195759, 179585, 183229, 155897, 113123, 82125, 68031, 59309]
										}, {
											name : "솔껍질깍지벌레",
											fillColor : "rgba(129,190,247,0.2)",
											strokeColor : "rgba(129,190,247,1)",
											pointColor : "rgba(129,190,247,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [10971, 11988, 45146, 47207, 41210, 32497, 21855, 12524, 8945, 7050]
										}, {
											name : "참나무시들음병",
											fillColor : "rgba(243,247,129,0.2)",
											strokeColor : "rgba(243,247,129,1)",
											pointColor : "rgba(243,247,129,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [0, 0, 1944, 3591, 4087, 2489, 1812, 3307, 2680, 3090]
										}, {
											name : "기타병해충",
											fillColor : "rgba(255,0,128,0.2)",
											strokeColor : "rgba(255,0,128,1)",
											pointColor : "rgba(255,0,128,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [153897, 146962, 139235, 134301, 118584, 96377, 85008, 64005, 52455, 41268]
										}]
									});
								});

							</script>
						</div>
					</section>
				</div>
			</div>
			<div class="row" style="margin-top:5px;">
				<label class="col-lg-2 text-right">시계열 구간 : </label>
				<div class="col-lg-8">

					<table class="slider-data">
						<tr>
							<td>2004</td>
							<td>2005</td>
							<td>2006</td>
							<td>2007</td>
							<td>2008</td>
							<td>2009</td>
							<td>2010</td>
							<td>2011</td>
							<td>2012</td>
							<td>2013</td>
							<td>2014</td>
						</tr>
					</table>
					<div class="slider"></div>

					<script type="text/javascript">
						$(".slider").slider({
							range : true,
							min : 2003,
							max : 2014,
							values : [2004, 2010]
						});
					</script>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<hr>
			<footer>
				<p>
					&copy; Company 2013
				</p>
			</footer>
		</div>
	</body>
</html>
